/** * design based on: * Parallax Scrolling Tutorial * For Smashing Magazine * July 2011 * * Author: Richard Shepherd * www.richardshepherd.com * @richardshepherd */ body { font-style: sans-serif; background-color: #000; font-size: 18px; } article h2 { font-family: sans-serif; font-size: 30px; margin: 25px 0; line-height: 1em; } article h3 { font-family: sans-serif; font-size: 20px; margin-top: 15px; margin-left: 40%; line-height: 1em; } .story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);} .story2 { height: 800px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);} .story3 { height: 100px; padding: 0; margin: 0; width: 100px; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);} .story4 { height: 100px; padding: 0; margin: 0; width: 33%; max-width: 1000px; position: relative; margin: 0; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8); display: inline-block; margin-top: -4px; } #first { background: url(coral3.jpg) 50% 0 no-repeat fixed; } #second { background: url(../interactive/poolbak.jpg) 50% 0 no-repeat fixed; }/*//#59c5c5;*/ #third { background: url(../html5/spiral.jpg) 50% 0 repeat fixed; } #fourth { background: url(../brushstrokes/pink.jpg) 50% 0 no-repeat fixed; } #fifth { background: url(16th.jpg) 50% bottom no-repeat fixed; } #sixth { background-color: #000; background: url(ceiling.JPG) 50% bottom no-repeat fixed; } #seventh { background: url(blueberries2.jpg) 50% bottom no-repeat fixed; } #eighth { background: url(mushi530/mushi9_1.png) 50% 0 repeat fixed; } #ninth { background: url(puppet_process/52.png) 50% 0 repeat fixed; } #tenth { background: url(2Dto3D/b.png) 50% 0 repeat fixed; } #eleventh { background: url(mushi530/mushi27_3-2.png) 50% 0 repeat fixed; } #twelth { background: url(famtree.png) 50% 0 repeat fixed; } #thirteenth { background: url(2Dto3D/s.png) 50% 0 repeat fixed; } #fourteenth { background: url(shade/l.png) 50% 0 repeat fixed; } #fifteenth { background: url(2Dto3D/p.png) 50% 0 repeat fixed; } #sixteenth{ background: url(mushi530/b.png) 50% 0 repeat fixed; } #seventeenth{ background: url(c3.png) 50% 0 repeat fixed; } /* Introduction */ #first .smashinglogo { background: url(initials.png) 50% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; } #first article { width: 100%; top: 300px; position: absolute; text-align: center;box-shadow: 0 0 50px rgba(0,0,0,0.3); } #first article p, #first article a { color: #ccc; } #first article a { text-decoration: underline; } #first article a:hover { color: #fff; } #title { padding-bottom: 10px; } .colorBar { width: 75%; } /* Interactive */ #second article { background-color: rgba(255, 255, 255, .8); opacity:1; padding: 0px 20px 35px 20px; margin: 40px 0 0 20%; width: 50%;text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; position: absolute; top: 0; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1);color: #0ab; } #second article a { color: #046; text-decoration:none; font-size: 1.2em; line-height: 2em;} #second article a:hover { color: #6ef; text-decoration:none;} #second .photograph { background: url(../interactive/poolgirl.png) transparent 40% 100px no-repeat fixed; min-height: 700px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; } #second .abs { position: absolute; top:0px; left: 0px; width: 100%; height: 100%; } #second h2{ font-size: 2em; } /* Animation */ #third { border-top: 1px solid rgba(0,0,0, 1); font-size: 15px; text-size-adjust: 300%;} #third article { background: rgba(44, 52, 34,.95); padding: 10px 20px 40px 20px; margin: 0 0 0 60%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); width: 250px; text-align: justify; } #third article p { margin-bottom: 25px; } #third .html5 { margin: 0 0 0 10%; padding-top: 0px; position: absolute; width: 60%; background-color: rgba(44, 52, 34,.95); } #third h2 {text-align: center;} #third .html5 img { width: 100%; margin-bottom: 5px; opacity: .9; } #curvedEdges { -webkit-border-radius:20px; -moz-border-radius:20px; -border-radius:20px; } #third .one { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/dol2.jpg); } #third .one:hover { background-image: url(../html5/dol.jpg); } #third .two { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/sal2.jpg); } #third .two:hover { background-image: url(../html5/sal.jpg); } #third .three { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/rgb2.jpg); } #third .three:hover { background-image: url(../html5/rgb.jpg); } #third .four { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/slug2.jpg); } #third .four:hover { background-image: url(../html5/slug.jpg); } #third .five { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/wav2.jpg); } #third .five:hover { background-image: url(../html5/wav.jpg); } #third .six { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/spir2.jpg); } #third .six:hover { background-image: url(../html5/spir.jpg); } #third .seven { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/fire2.jpg); } #third .seven:hover { background-image: url(../html5/fire.jpg); } #third .eight { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/gra2.jpg); } #third .eight:hover { background-image: url(../html5/gra.jpg); } #third .nine { width: 100%; height: 65px; margin-bottom: 8px; background-image: url(../html5/rain2.jpg); } #third .nine:hover { background-image: url(../html5/rain.jpg); } #third .photograph { background: url(../html5/spirally.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; } /* Digital Brushstrokes */ #fourth { border-top: 1px solid rgba(0, 0, 0, .5); } #fourth article { width: 90%; margin-left: 5%; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #fff; position: absolute; top: 0; padding-top: 55px; background-color: rgba(0,0,0,.5); bottom:0; text-align: center; } #fourth .descrip { text-align: justify; width: 300px; margin-left: 100px; } #fourth .dates { text-align: center; } #digigal{ opacity: .6; } #digigal:hover { opacity: 1; } #fourth .photograph { background: url(../brushstrokes/brush1.png) transparent 40% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; } /* Tradtional Media*/ #fifth article { background: rgba(255,255,255,.2); /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.4))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.4)); /* for firefox 3.6+ */ width: 100%; margin: 70px 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #000; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); } #fifth article h2 { float: right; padding-right: 11%;} #fifth gallery { background-color: rgba(0,0,0, .8); repeat #333; color: #fff; padding: 0px; margin: 200px 0 0 5%; width: 90%; height: 600px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; color: #036; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 1px solid rgba(150,150,150,0.1); text-align: center; position: absolute;overflow-y:scroll; } #fifth img { width: 70%; margin: 5px 5px 5px 5px; } #fifth ::-webkit-scrollbar { width: 20px; } #fifth ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(155,155,155,1); border-radius: 10px; } #fifth ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(255,255,255,1); } #seventeenth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(246,192,213,0)), to(rgba(246,192,213,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(246,192,213,0), rgba(246,192,213,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #fff; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #seventeenth .grad h2 { float: right; padding-right: 11%;} #seventeenth .dates { color: #fff; } #second .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #046; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 20px 0; } #second .grad h2 { float: right; padding-right: 11%;} #second .dates { color: #046; } #third .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(216,232,171,0)), to(rgba(216,232,171,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(216,232,171,0), rgba(216,232,171,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #000; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #third .grad h2 { float: right; padding-right: 11%;} #third .dates { color: #000; } #fourth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #caa; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 20px 0; } #fourth .grad h2 { float: right; padding-right: 11%;} #fourth .dates { color: #caa; } #fifth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #9a6; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 20px 0; } #fifth .dates { color: #9a6; } #sixth article { background-color: rgba(255, 255, 255, .6); opacity:1; repeat #333; padding: 10px 20px 40px 20px; margin: 38px 0 0 12%; width: 230px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.5em; position: absolute; top: 0; box-shadow: 0 0 25px rgba(0,0,0,0.3); border: 10px solid rgba(230,230,230,1);color: #333; text-align: justify; } #sixth article h2 { font-size: 1.5em; } #sixth .photograph { background: url(profile_pic.png) transparent 40% 100px no-repeat fixed; min-height: 600px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; } #sixth a { font-size: 1.2em; line-height: 1.5; color: #666; text-decoration: none;} #sixth a:hover { color: #000;} /* Contact */ #seventh .byebye { background: url(thanks.png) 40% 100px no-repeat fixed; height: 100%; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; } #seventh article { width: 100%; top: 300px; position: absolute; text-align: center; height:235px; box-shadow: 0 0 50px rgba(0,0,0,0.3); color: #fff; line-height: 1.8em;} #contact-form {padding-top: 12px;} #eighth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(150,230,255,0)), to(rgba(150,230,255,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(150,230,255,0), rgba(150,230,255,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #000; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #eighth .grad h2 { float: right; padding-right: 11%;} #eighth .dates { color: #000; } #ninth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(50,50,50,0)), to(rgba(50,50,50,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(50,50,50,0), rgba(50,50,50,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #ddd; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #ninth .grad h2 { float: right; padding-right: 11%;} #ninth .dates { color: #fff; } #tenth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(50,50,50,0)), to(rgba(50,50,50,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(50,50,50,0), rgba(50,50,50,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #bbb; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #tenth .grad h2 { float: right; padding-right: 11%;} #tenth .dates { color: #fff; } #eleventh .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,230,150,0)), to(rgba(255,230,150,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(255,230,150,0), rgba(255,230,150,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #305; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #eleventh .grad h2 { float: right; padding-right: 11%;} #eleventh .dates { color: #000; } #twelth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #333; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #twelth .grad h2 { float: right; padding-right: 11%;} #twelth .dates { color: #000; } #thirteenth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(75,100,50,0)), to(rgba(75,100,50,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(75,100,50,0), rgba(75,100,50,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #ab9; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #thirteenth .grad h2 { float: right; padding-right: 11%;} #thirteenth .dates { color: #efd; } #fourteenth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(218,222,137,0)), to(rgba(218,222,137,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(218,222,137,0), rgba(218,222,137,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #4c7082; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #fourteenth .grad h2 { float: right; padding-right: 11%;} #fourteenth .dates { color: #000; } #fifteenth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #ccc; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #fifteenth .grad h2 { float: right; padding-right: 11%;} #fifteenth .dates { color: #fff; } #sixteenth .grad { /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0)', endColorstr='rgba(255,255,255,0.4)'); /* for IE */ background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(255,255,255,0.8))); /* for webkit browsers */ background: -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.8)); /* for firefox 3.6+ */ width: 100%; margin: 0 0 0 0; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); line-height: 1.2em; color: #333; position: absolute; box-shadow: 0 0 25px rgba(0,0,0,0.3); padding: 10px 0 90px 0; } #sixteenth .grad h2 { float: right; padding-right: 11%;} #sixteenth .dates { color: #000; } #quickLinks{ position: fixed; top:3%; right: 5%; width:25%; height:4%;} .link { width: 12%; height: 80%; background-color: #fff ; margin: 1%; float: left; opacity: .7; background: url(link.png); background-size:100%; } .link:hover { opacity: .95; } .dates { position: absolute; right: 10px; bottom: 0; font-weight: bold; }